<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view class="justify-center group_1">
					<view class="w-f-s">家装顾问(巡检) </view>
				</view>
				<view class="flex-col group_4">
					<!-- <text class="text">家装顾问(巡检)</text> -->
					<view class="flex-row group_5">
						<text class="text_1" @click="taskTab(0)">我的任务</text>
						<text class="text_2" @click="taskTab(1)">当天任务</text>
					</view> 
					<view v-if="taskState == 0">
						<image :src="$IMG_URL+'16557870711174686953.png'" class="image_6" />
					</view>
					<view v-else>
						<image :src="$IMG_URL+'16557870711174686953.png'" class="image_66" />
					</view>

				</view>
			</view>
			<view class="flex-row section_2">
				<view class="flex-col items-center text-wrapper" :class="this.mytaskState == 0?'taskActive':''"
					@click="mytaskTab(0)"><text class="text_3">进行中</text></view>
				<view class="flex-col items-center text-wrapper_1" :class="this.mytaskState == 1?'taskActive':''"
					@click="mytaskTab(1)"><text class="text_4">已完成</text></view>
			</view>
			<scroll-view :refresher-threshold="0" @scrolltoupper="onRefresh" style="margin-top: 400rpx;" :style="{height:scrollHeight+'px'}" class="scroll" scroll-y="true" :refresher-enabled='refresherEnabled'     refresher-background="#f0f0f0">
			    <view class="flex-col list" v-if="this.mytaskList == '' || this.mytaskList ==null" >
			       	<u-empty style="height: 100vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			       	</u-empty>
			    </view> 
				<view class="flex-col list" v-else style="">
					<view class="flex-col list-item" :key="i" v-for="(item, i) in mytaskList" @click="seeExplan(i)">
						<view class="justify-between group_6">
							<text class="text_5">订单编号：{{item.ordersNumber}}</text>
							<text class="text_7" v-if="mytaskState == 0">进行中</text>
							<text class="text_7" v-else-if="item.ordersStatus==5">已完成</text>
							<text class="text_7" v-else-if="item.ordersStatus==4">待评价</text>
						</view>
						<view class="flex-row group_7">
							<image :src="item.address" class="image_7" />
							<view class="flex-row">
								<text class="text_9">{{item.consumerName}}</text>
								<text class="text_9" v-if="item.consumerRemark != null">({{item.consumerRemark}})</text>
							</view>
							
						</view>
						<text class="text_11" v-if="item.conductNum !=null">巡检服务订单</text>
						<text class="text_11" v-else-if="item.conductNum == null">验收服务订单</text>
						<text class="text_13"
							v-if="item.conductNum != null">第{{item.conductNum}}次巡检({{item.detailedName}})</text>
						<text class="text_13" v-else-if="item.conductNum == null">{{item.acceptanceServiceTypeName}}</text>
						<view class="group_8">
							<text class="text_15">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
							<text class="text_17">I</text>
							<text class="text_19">{{item.roomArea}}m²</text>
							<text class="text_21">I</text>
							<text class="text_23">{{item.roomTypeName}}</text>
						</view>
						<view class="flex-row group_9" v-if="item.conductNum == null">
							<text class="text_25">预约时间：{{item.isData}}</text>
							<text class="text_27">{{item.isTime}}</text>
						</view>
						<view class="flex-row group_9" v-else>
							<text class="text_25">上门巡检时间：{{item.inspectionDate}}</text>
						</view>
						<view class="justify-end group_10" v-if="item.conductNum != null">
							<view class="flex-row items-center text-wrapper_4" @click.stop="seeExplan(i)">
								<text class="text_32">查看详情</text>
							</view>
							<view class="flex-row items-center " v-if="item.inspectionNums==item.conductNum">
								<view class="flex-col items-center justify-center text-wrapper_3" v-if="mytaskState == 0">
									<text class="text_33" @click="completeBnt(i)">完成</text>
								</view>
								<view class="flex-col items-center" v-else>
									
								</view>
							</view>
						</view>
						<view class="justify-end group_10" v-else-if="item.conductNum == null">
							<view class="flex-col items-center justify-center text-wrapper_2" @click.stop="yseExplan(i)"><text
									class="text_29">验收详情</text></view>
							<view class="flex-col items-center justify-center text-wrapper_3" v-if="mytaskState == 0">
								<text class="text_31" @click.stop="ysbtn(i)">完成</text>
							</view>
						</view>
					</view>
					<view @click="seemore" v-if="mytaskList.length>10">
						<uni-load-more color="#007AFF" :status="status" :content-text="contentText" />
					</view>
				</view>
			</scroll-view>
		</view>
		<u-overlay :show="loading" @click="loading = false" class="u-flex u-row-center u-col-center">
			<view >
				<u-loading-icon size="30" :textSize="15" text="请求中" textColor="white" :vertical="true" color="white"></u-loading-icon>
			</view>
			
		</u-overlay>
	</view>
</template>

<script>
	export default {
		name: 'onsiteindex',
		data() {
			return {
				loading:false,
				mytaskList: [],
				top:0,
				scrollHeight:0,
				taskState: 0,
				mytaskState: 0,
				contentText: {
					contentdown: '点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				status: 'more',
				pageNum: 1,
				refresherEnabled:false, //开启自定义下拉刷新
				 _freshing:false,
				triggered: false //设置当前下拉刷新的状态
			};
		},
		mounted()
		{
			console.log('mounted');
		    this.getScrollHeight();	
		},
		created() {
			this._freshing = false;
			setTimeout(() => {
			    this.triggered = true;
			}, 1000)
			this.getdate();
		},
		methods: {
			ysbtn(i){
				this.$http('supplement.upOrdersId', {
					ordersId: this.mytaskList[i].ordersId
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: '操作成功'
						})
						location.reload()
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			getScrollHeight()
			{
			   	const query = uni.createSelectorQuery().in(this);
			   	query.select('.page').boundingClientRect()
				query.select('.section_1').boundingClientRect()
				query.select('.section_2').boundingClientRect()
				query.exec(r=>{
                      this.scrollHeight=r[0].height-r[1].height-r[2].height+50
					  console.log(this.scrollHeight);
				});
			},
			completeBnt(i) {
				// 巡检列表
				this.$http('supplement.lastInspectionFrequency', {
					ordersId: this.mytaskList[i].ordersId,
					num: this.mytaskList[i].conductNum,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "success",
							title: res.msg
						})
						location.reload()
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			refresherrestore()
			{
				 this.triggered = 'restore'; // 需要重置
			  console.log('refresherrestore');	
			},
			seemore() {
				this.pageNum++;
				let queryType;
				// 状态(1进行中 2已完成)
				let status;
				if (this.taskState == 0) {
					queryType = '1';
					if (this.mytaskState == 0) {
						status = '3'
					} else {
						status = '5'
					}
				} else {
					queryType = '2';
					if (this.mytaskState == 0) {
						status = '3'
					} else {
						status = '5'
					}
				}
				this.$http('onsite.orderlist', {
					queryType: queryType,
					status: status,
					pageSize: 10,
					pageNum: this.pageNum
				}).then(res => {
					if (res.code == 200) {
						if (res.data != '') {
							this.mytaskList.push(...res.data);
							if(res.data.length<10){
								this.status = 'contentnomore'
							}
						} else {
							this.status = 'contentnomore'
						}

					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			getdate() {
				this.pageNum = 1;
				this.status = 'more';
				// console.log('getdate')
				// 1我的任务 2当天任务
				let queryType;
				// 状态(1进行中 2已完成)
				let status;
				if (this.taskState == 0) {
					queryType = '1';
					if (this.mytaskState == 0) {
						status = '3'
					} else {
						status = '5'
					}
				} else {
					queryType = '2';
					if (this.mytaskState == 0) {
						status = '3'
					} else {
						status = '5'
					}
				}
				this.mytaskList = [];
				this.$http('onsite.orderlist', {
					queryType: queryType,
					status: status,
					pageSize: 10,
					pageNum: this.pageNum
				}).then(res => {
					if (res.code == 200) {			
						this.mytaskList = res.data;
						if(res.data.length<10){
							this.status = 'contentnomore'
						}
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			onPulling()
			{
			  // console.log('onpull');	
			},
			onRefresh()
			{
				console.log('onrefresh');
				
				if (this._freshing) return;
				this.loading=true;
				this._freshing = true;
				this.getdate();
				setTimeout(() => {
					this.top=0;
				    this.triggered = false;
				    this._freshing = false;
					this.loading=false;
				}, 1000)
			},
			yseExplan(i) {
				this.$http('common.isOpen',{
					ordersId:this.mytaskList[i].ordersId
				}).then(res=>{
					if(res.code==200){
						if(res.data==1){
							
							// 验收详情
							uni.navigateTo({
								url: '/pages/onSite/onSiteIndex/checkEx/checkEx?ordersId=' + this.mytaskList[i].ordersId
							})
							return;
						}else{
							uni.showToast({
								icon: 'none',
								title:'请先完成其他服务'
							})
						}
					}else{
						
					}
				})
				


			},
			seeExplan(i) {
				uni.setStorage({
					data: this.mytaskList[i].inspectionFrequencyId,
					key: 'inspectionFrequencyId'
				})
				uni.setStorage({
					data: this.mytaskList[i].projectId,
					key: 'projectId'
				})
				// uni.navigateTo({
				// 	url: '/pages/onSite/onSiteIndex/PatroService/text?ordersId=' + this.mytaskList[i]
				// 		.ordersId+'&mytaskState='+this.mytaskState
				// })
				// 查看详情
				uni.navigateTo({
					url: '/pages/onSite/onSiteIndex/PatroService/PatroService?ordersId=' + this.mytaskList[i]
						.ordersId+'&mytaskState='+this.mytaskState
				})
			},
			taskTab(i) {
				this.taskState = i;
				this.getdate();
			},
			mytaskTab(i) {
				this.mytaskState = i;
				this.getdate();
			},
		},
	};
</script>

<style scoped lang="scss">
	.group_11 {
		height: 76rpx;
	}

	.list-item {
		padding-left: 24rpx;
		padding-right: 23rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_13 {
		width: 54rpx;
		height: 54rpx;
	}

	.group_6 {
		padding: 30rpx 0 27rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		margin-top: 24rpx;
	}

	.text_11 {
		margin-top: 21rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		font-weight: 600;
	}

	.text_13 {
		margin-top: 24rpx;
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_8 {
		margin-top: 22rpx;
		align-self: flex-start;
		line-height: 28rpx;
	}

	.group_9 {
		margin-top: 27rpx;
	}

	.group_10 {
		margin-top: 33rpx;
		padding: 25rpx 0 31rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_5 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		margin-bottom: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}

	.text_9 {
		margin-left: 16rpx;
		margin-top: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		font-weight: 600;
	}

	.text_15 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_17 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		margin:0 10rpx;
	}

	.text_19 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_21 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		margin:0 10rpx;
	}

	.text_23 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_25 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		margin-left: 10rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper_2 {
		margin-right: 16rpx;
		padding: 9rpx  19rpx;
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
		height: 56rpx;
	}

	.text-wrapper_3 {
	
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
		height: 56rpx;
		line-height: 56rpx;
	}
	

	.text-wrapper_4 {
		margin-right: 16rpx;
		padding: 9rpx 25rpx;
		background-color: #F6F7F9;
		border-radius: 28rpx;
		height: 56rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.text_29 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_32 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_33 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 148rpx;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 36rpx;
		background: #1C6AFE;
		font-family: '.AppleSystemUIFont';
	}

	.text_31 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 40rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
	
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 6rpx 148rpx 16rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
	}

	.section_1 {
		padding: 7rpx 0 81rpx;
		background-image: url($IMG_URL+'16557870709899113105.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index:9;
	}

	.section_2 {
		margin-top: -56rpx;
		padding: 32rpx 56rpx 40rpx;
		background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 0%, #f6f7f9 56.65%, #f6f7f9 100%);
		border-radius: 32rpx 32rpx 0px 0px;
		position: relative;
		position: fixed;
		top: 330rpx;
		left: 0;
		width: 100%;
		z-index:9;
		
	}

	.list {
		
		padding: 0 24rpx;
		position: relative;
	}

	.view_28 {
		margin-right: 12rpx;
	}

	.w-f-s {
		font-weight: 500;
		font-size: 34rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}

	.group_1 {
		padding: 3.5rpx 11rpx 2.5rpx 12rpx;
		position: relative;
		margin-top: 70rpx;
	}

	.group_4 {
		margin-top: 24rpx;
		padding: 0 56rpx;
	}

	.text-wrapper {
		padding: 10rpx 0 21rpx;
		background-color: #f2f2f2;
		border-radius: 32rpx;
		width: 180rpx;
		height: 64rpx;
	}

	.taskActive {
		background-color: #1d6aff !important;

	}

	.taskActive text {
		color: #fff !important;
	}

	.text-wrapper_1 {
		margin-left: 24rpx;
		padding: 10rpx 0 21rpx;
		background-color: #f2f2f2;
		border-radius: 32rpx;
		width: 180rpx;
		height: 64rpx;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.text_74 {
		color: #1d6aff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_75 {
		color: #333333;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.group_2 {
		position: absolute;
		left: 12rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_2 {
		width: 85rpx;
		height: 18rpx;
	}

	.group_3 {
		position: absolute;
		right: 11rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		align-self: center;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_5 {
		margin-top: 23rpx;
	}

	.image_6 {
		margin-left: 44rpx;
		margin-top: 18rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_66 {
		margin-left: 35%;
		margin-top: 18rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.text_3 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
		font-weight: 500;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 45rpx;
		font-weight: 500;
	}

	.image {
		width: 33rpx;
		height: 20rpx;
	}

	.image_1 {
		margin-left: 8rpx;
		width: 28rpx;
		height: 20rpx;
	}

	.image_3 {
		width: 14rpx;
		height: 24rpx;
	}

	.image_4 {
		margin: 3.5rpx 0 2.5rpx 15.5rpx;
		width: 55rpx;
		height: 18rpx;
	}

	.image_5 {
		margin-left: 8.5rpx;
		width: 53rpx;
		height: 23rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		margin-left: 64rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
